import { Component } from "react";

interface IProps {
  count: number;
  msg: string;
}

export default class Hello extends Component<IProps> {
  shouldComponentUpdate(nextProps, nextState) {
    // 1. 要判断 props 是否真的有变化再决定要不要阻止更新
    //    1. 判断 nextProps 属性length 与 this.props 属性length 是否相等
    //       不相等，直接返回 true 不阻止更新
    //       相等：
    //          循环比较两者的相同属性是否一致（Object.is）
    //              都一致：表示数据没有变化，返回 false 阻止更新
    //              否则：表示数据又变化，返回 true 不阻止更新

    const oldPropsKeys = Object.keys(this.props);
    const newpropsKeys = Object.keys(nextProps);

    const oldPropsLen = oldPropsKeys.length;
    const newPropsLen = newpropsKeys.length;

    if (oldPropsLen !== newPropsLen) {
      return true;
    } else {
      return !newpropsKeys.every((key) => {
        return Object.is(nextProps[key], this.props[key]);
      });
    }
  }

  render() {
    console.log("Hello Render");
    return (
      <div>
        <h2>Hello, {this.props.count}</h2>
        <p>msg: {this.props.msg}</p>
      </div>
    );
  }
}
